<template>
  <div class="qa-wrap">
    <el-row>
      <el-col :span="18">
        <classify-search></classify-search>
        <search-nav @switchNav="switchNav"></search-nav>
        <classify-table></classify-table>
      </el-col>
      <el-col :span="6" class="right">
        <img class="ask-question" :src="`${$baseImgUrl}qa/ask_question.jpg`" @click="askQuestion">
        <user-info></user-info>
        <question-star></question-star>
        <qa-honour></qa-honour>
      </el-col>
    </el-row>
    <el-dialog title="提问" :visible.sync="visible" class="qa-dialog">
      <el-form ref="qaForm" :model="qaForm" :rules="rules" label-position="left" label-width="60px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="qaForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="详情" prop="desc">
          <el-input type="textarea" rows="5" v-model="qaForm.desc" placeholder="请阐述问题详细内容" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleAsk()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ClassifySearch from './components/ClassifySearch.vue';
import SearchNav from './components/SearchNav.vue';
import ClassifyTable from './components/Table.vue';
import UserInfo from './components/UserInfo.vue';
import QuestionStar from './components/QuestionStar.vue';
import QaHonour from './components/Honour.vue';

export default {
  name: 'QA',
  components: {
    ClassifySearch,
    SearchNav,
    ClassifyTable,
    UserInfo,
    QuestionStar,
    QaHonour
  },
  data() {
    return {
      visible: false,
      qaForm: {
        title: '',
        desc: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入标题' }
        ],
        desc: [
          { required: true, message: '请输入问题详情' }
        ]
      }
    };
  },
  methods: {
    switchNav(keyword) {
      console.log(keyword);
    },
    askQuestion() {
      this.visible = true;
    },
    handleAsk() {
      console.log(this.qaForm);
      this.$refs.qaForm.validate(valid => {
        if (!valid) {
          return;
        }
        setTimeout(() => {
          this.$notify({
            type: 'success',
            title: '提示',
            message: '提问成功',
            duration: 2000
          });
          this.visible = false;
        }, 200);
      })
    }
  }
};
</script>

<style lang="less" scoped>
  .qa-wrap {
    .right {
      padding-left: 10px;
      .ask-question {
        width: 100%;
        margin-bottom: 10px;
        cursor: pointer;
      }
    }
  }
</style>
